<template>
  <div id="app">
    <!--查询-->
    单据号:
    <el-input v-model="returnNumber" style="width:120px;"></el-input>
    供应商:
    <el-select v-model="supplierName" placeholder="请选择">
      <el-option
        v-for="bean in supplierList"
        :label="bean.name"
        :key="bean.name"
        :value="bean.name"
      ></el-option>
    </el-select>
    是否付款:
    <el-select v-model="state" placeholder="请选择" style="width:100px">
      <el-option
        v-for="bean in stateList"
        :label="bean.name"
        :key="bean.id"
        :value="bean.id"
      ></el-option>
    </el-select>
    日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="startTime"
      style="width:180px;"
    ></el-date-picker>至
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="endTime"
      style="width:180px;"
    ></el-date-picker>
    <el-button type="infor" size="medium" @click="list()">查 询</el-button>
    <!--退货信息列表-->
    <el-table :data="dataList" tooltip-effect="dark" style="width: 100%" @row-click="openDetails">
      <el-table-column prop="returnNumber" label="进货单号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="returnDate" label="进货日期" show-overflow-tooltip></el-table-column>
      <el-table-column prop="supplierName" label="供应商" show-overflow-tooltip></el-table-column>
      <el-table-column prop="amountPayable" label="进货金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="userName" label="操作员" show-overflow-tooltip></el-table-column>
      <el-table-column prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="danger" @click="delPurchase(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/><br/><br/><br/><br/>
    <!--退货商品列表-->
    <el-table :data="goodList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="code" label="商品编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="商品名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="model" label="商品型号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total" label="总金额" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
var quan;
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      dataList: [],
      returnNumber: "",
      supplierName: "",
      state: "",
      startTime: "",
      endTime: "",
      supplierList: [],
      stateList: [{
          id: '1',
          name: '已付'
        }, {
          id: '2',
          name: '未付'
        }],
      goodList: []
    };
  },
  mounted: function() {
    quan = this;
    // quan.list();
    quan.axios
        .get("http://localhost:9999/biz/purchase/getSupplier", {
          params: {
            access_token: localStorage.getItem("access_token"),
          }
        })
        .then(function(res) {
            quan.supplierList = res.data.obj;
        });
  },
  methods: {
    list: function() {
      quan.axios
        .get("http://localhost:9999/biz/return/returnQuery", {
          params: {
            access_token: localStorage.getItem("access_token"),
            returnNumber: quan.returnNumber,
            supplierName: quan.supplierName,
            state: quan.state,
            startTime: quan.startTime,
            endTime: quan.endTime
          }
        })
        .then(function(res) {
            quan.dataList = res.data.obj;
        });
    },
    openDetails: function(row){
      console.info(row.id);
      quan.axios
          .get("http://localhost:9999/biz/return/listGoods?returnListId="+row.id, {
            params: {
              access_token: localStorage.getItem("access_token"),
            }
          })
          .then(function(res) {
              quan.goodList = res.data.obj;
          });
    },
    delPurchase: function(row){
      var $this = this;
      quan.axios
          .get("http://localhost:9999/biz/return/delete?returnListId="+row.id, {
            params: {
              access_token: localStorage.getItem("access_token"),
            }
          })
          .then(function(res) {
              $this.$message(res.data.msg);
              location.reload();
          });
    }
  }
};
</script>